<script setup lang="ts">
import { ref } from 'vue'

const money = ref(100)
const buy = (price:number)=>{
money.value -= price
}
</script>


<template>
  <div id="app">
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button @click="buy(3)">可乐3元</button>
      <button @click="buy(5)">牛奶5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <!-- 内联写法：没有定义方法 适用于简单的场景 -->
      <button @click="money--">减1</button>
      <!-- 注意；模版中的 ref 直接修改即可，【不能】写 .value  -->
      <button @click="money -= 10">减10</button>

      <!-- v-on: 可简写为 @ -->
      <!--
       <button v-on:事件名="内联语句">按钮</button>
       <button v-on:事件名="处理函数">按钮</button>
       <button v-on:事件名=处理函数传参>按钮</button> 
       -->
       <!-- 可简写为：
         <button @事件名="内联语句">按钮</button>
         <button @事件名="处理函数">按钮</button>
         <button @事件名=处理函数传参>按钮</button>
         -->
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
</template>

<style>
.box {
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 200px;
}

h3 {
  margin: 10px 0 20px 0;
}

p {
  margin: 20px;
}
</style>
